<template>
  <div class="content">
    <div class="leftinfo">
      <p class="title">6.00<span class="per">%</span></p>
      <p class="desc">历史年化收益率</p>
      <p class="btn">立即抢购</p>
    </div>
    <swiper class="swiper-container" :options="swiperOption">
      <swiper-slide class="swiper-wrapper" v-for="item of swiperlist" :key="item.id">
        <img :src="item.url" alt="">
        <div class="swiper-desc">{{item.desc}}</div>
      </swiper-slide>
    </swiper>
    <div class="tuijian">
      <span>为您推荐</span>
      <span class="iconfont icon-item">&#xe62d;</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Swiperlist',
  data () {
    return {
      swiperOption: {
        direction: 'vertical',
        autoplay: true,
        loop: true
      },
      swiperlist: [
        {
          id: '001',
          url: 'https://img12.360buyimg.com/jrpmobile/jfs/t1/7689/1/14465/10585/5c64d790E0b39e2d6/18cb423a372edca4.jpg?width=160&height=160',
          desc: '智能电动打气筒 立省180元'
        },
        {
          id: '002',
          url: 'https://img12.360buyimg.com/jrpmobile/jfs/t1/27504/30/6878/8656/5c64d7a8E3972b42a/e25ef7c08171bf14.jpg?width=160&height=160',
          desc: '一布擦出新车  仅需29元'
        },
        {
          id: '003',
          url: 'https://img12.360buyimg.com/jrpmobile/jfs/t1/20504/15/6961/5609/5c64d7deEbde42eb6/2a15e29b9548d1cf.jpg?width=160&height=160',
          desc: '触控运动蓝牙耳机 立减260元'
        },
        {
          id: '004',
          url: 'https://img12.360buyimg.com/jrpmobile/jfs/t1/20022/17/7059/7533/5c64d801E8d1ffa7f/17cca0e28a813d37.jpg?width=160&height=160',
          desc: '石墨烯乳胶助眠枕 直降699元'
        },
        {
          id: '005',
          url: 'https://img12.360buyimg.com/jrpmobile/jfs/t1/24463/16/6972/9020/5c64d815E0cf15a10/5b786ef4c41366bd.jpg?width=160&height=160',
          desc: '智能感应净水龙头 立省200元'
        },
        {
          id: '006',
          url: 'https://img12.360buyimg.com/jrpmobile/jfs/t1/32542/8/1997/12299/5c64d82dEdf005878/4fb089c15698a77b.jpg?width=160&height=160',
          desc: '手机3D VR外置镜头 直降100元'
        }
      ]
    }
  }
}
</script>

<style lang="stylus" scoped>
  .content
    display flex
    justify-content space-around
    padding 0 30px
    position relative
    margin-bottom 40px
    .leftinfo
      display flex
      flex-direction column
      background #FF7F24
      width 200px
      margin-right 15px
      padding 20px 34px 20px 26px
      border-radius 10px
      p
        color #fff
      .title
        font-family DIN-Bold
        font-size 65px
        font-weight 700
        margin-bottom 10px
        span
          font-size 26px
      .desc
        padding-bottom 10px
        white-space nowrap
        text-overflow ellipsis
        overflow hidden
        border-bottom 1px solid #ccc
      .btn
        margin-top 16px
    .swiper-container
      height 200px
      background #9B30FF
      border-radius 10px
      img
        width 160px
        height 160px
        margin 20px
      .swiper-desc
        color #fff
        margin-top 20px
        line-height 30px
        width 44%
    .tuijian
      position absolute
      display flex
      justify-content space-between
      width 220px
      bottom 30px
      right 60px
      z-index 996
      span
        color #fff
        display flex
        align-items flex-end
      .icon-item
        font-size 26px
        padding 25px
        border-radius 50%
        background #c5c5c5
</style>
